<template>
    <div id="operating-record">
        <div class="table-toolbar">
            <el-input
                v-model="searchParams.codeOrName"
                style="width: 250px; margin-right: 10px"
                placeholder="请输入来源编号/名称"
                size="mini"
            ></el-input>
            <el-button size="mini" type="primary" @click="handleBtnClick('search')">查询</el-button>
            <el-button size="mini" @click="handleBtnClick('export')">导出</el-button>
            <div style="float: right">
                <el-button size="mini" type="primary" @click="layoutDialog = true">布局设置</el-button>
            </div>
        </div>

        <RiskTable
            ref="risk-table"
            :tableData="tableData"
            :tableConfig="tableConfig"
            :column="showColumns"
            :paging="paging"
            :searchParams="searchParams"
            v-loading="tableLoading"
            :key="tableKey"
            style="height: calc(65% - 55px)"
            :highlightRow="true"
            :stripe="false"
            @page-change="getTableData"
            @cell-click="handleRowClick"
        >
            <template #checkStatus="{ row }">
                <span v-if="row.checkStatus === '1'" class="yellow">{{ CheckStatus[row.checkStatus] }}</span>
                <span v-else-if="row.checkStatus === '2'" class="blue">{{ CheckStatus[row.checkStatus] }}</span>
                <span v-else class="red">{{ CheckStatus[row.checkStatus] }}</span>
            </template>
        </RiskTable>

        <el-divider></el-divider>

        <h3 class="width-100" style="padding: 5px 0">
            <div class="separator-S"></div>
            来源修改详情
        </h3>

        <div v-for="i in recordDetails" :key="i.checkStatus" class="record-detail">
            <p>
                <span
                    >更新类型: <b>{{ ModifyEvent[i.riskModifyTypeEnum] }} </b>
                </span>
                <span>
                    {{ i.moduleDetail }}: <b>{{ i.beforeChange ? i.beforeChange + '——' : '' }} {{ i.afterChange }}</b>
                </span>
                <span style="float: right">{{ modifyDateTime }}</span>
            </p>
            <p>
                <span> 更新人: {{ modifyUser }} </span>
            </p>
        </div>

        <!-- 布局设置 -->
        <RiskTableLayout
            ref="risk-table-layout"
            :tableName="'CIBFUND_OPERATING_RECORD'"
            :visible.sync="layoutDialog"
            :column="columns"
            :fixedColumns="fixedColumns"
        />
    </div>
</template>
<script lang="ts">
import { ColumnVO, PageVO, TableConfigVO, VueObject } from '@/common/vo';
import { Component, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';
import RiskTable from '@/common/components/risk-table-plus.vue';
import RiskTableLayout from '@/common/components/risk-table-layout-plus.vue';
import { dateFormat, timeFormat } from '@/utils/tools';
import Dict from '../dict/index';

@Component({ name: 'OperatingRecord', components: { RiskTable, RiskTableLayout } })
export default class OperatingRecord extends Vue {
    Dict = new Dict();

    tableLoading: boolean = false;
    tableData: any[] = [];
    tableConfig: TableConfigVO = {
        rowKey: 'ckSerialNo', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    columns: ColumnVO[] = [
        {
            title: '操作序号',
            field: 'ckSerialNo',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            fixed: 'left',
            width: 150,
        },
        {
            title: '操作类型',
            field: '_操作类型',
            sortable: true,
            sortField: '',
            filterType: 'funnel',
            filters: [{ label: 'label', value: 'value' }],
            fixed: 'left',
            minWidth: 150,
        },
        {
            title: '来源编号',
            field: '_来源编号',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            fixed: 'left',
            minWidth: 150,
        },
        {
            title: '来源名称',
            field: '_来源名称',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: 150,
        },
        {
            title: '变动方式',
            field: '_变动方式',
            sortable: true,
            sortField: '',
            filterType: 'funnel',
            filters: [{ label: 'label', value: 'value' }],
            minWidth: 150,
        },
        {
            title: '来源类型',
            field: '_来源类型',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: 150,
        },
        {
            title: '来源分组',
            field: '_来源分组',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: 150,
        },
        {
            title: '来源版本号',
            field: '_来源版本号',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: 150,
        },
        {
            title: '来源适用产品',
            field: '_来源适用产品',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: 150,
        },
        {
            title: '来源附件',
            field: '_来源附件',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: 150,
        },
        {
            title: '来源状态',
            field: '_来源状态',
            sortable: true,
            sortField: '',
            filterType: 'funnel',
            filters: [{ label: 'label', value: 'value' }],
            minWidth: 150,
        },
        {
            title: '来源发布/签署日期',
            field: '_来源发布',
            sortable: true,
            sortField: '',
            minWidth: 150,
        },
        {
            title: '来源生效日期',
            field: '_来源生效日期',
            sortable: true,
            sortField: '',
            minWidth: 150,
        },
        {
            title: '来源备注',
            field: '_来源备注',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: 150,
        },
        {
            title: '操作人',
            field: '_操作人',
            sortable: true,
            sortField: '',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: 150,
        },
        {
            title: '操作时间',
            field: '_操作时间',
            sortable: true,
            sortField: '',
            minWidth: 150,
        },
    ];
    tableKey: number = 0;
    showColumns: ColumnVO[] = [];
    fixedColumns: ColumnVO[] = [
        { title: '操作序号', field: 'ckSerialNo' },
        { title: '操作类型', field: '_操作类型' },
        { title: '来源编号', field: '_来源编号' },
    ];
    resetNoSelectedFieldList: ColumnVO[] = [];
    searchParams: any = {
        codeOrName: '',
        ckSerialNo: '',
        _操作类型: [],
        _变动方式: [],
        _来源类型: '',
        _来源分组: '',
        _来源编号: '',
        _来源名称: '',
        _来源版本号: '',
        _来源适用产品: '',
        _来源附件: '',
        _来源状态: [],
        _来源发布: '',
        _来源生效日期: '',
        _来源备注: '',
        _操作人: '',
    };
    paging: PageVO = { pageSize: 25, currentPage: 1, total: 0 };
    layoutDialog: boolean = false;

    recordDetails: any[] = [];
    modifyDateTime: string = '';
    modifyUser: string = '';

    mounted() {
        // 监听布局设置
        this.$watch(
            () => {
                return (this.$refs['risk-table-layout'] as VueObject).showColumns;
            },
            val => {
                this.showColumns = val && val.length ? val : this.columns;
                this.tableKey++;
            }
        );
        this.getTableData();
    }

    getTableData(): void {
        // this.tableLoading = true;
        // API.getContractOperateRecord({ indexCode: this.detail.indexCode, ...this.searchParams, paging: this.paging }).then((res: any) => {
        //     this.tableData = res?.list;
        //     this.paging.total = res?.total;
        //     this.tableLoading = false;
        // });
    }

    /**
     * 点击表格行 事件 展示变更详情
     */
    handleRowClick({ row }): void {
        if (row.indexSourceLogs) {
            this.modifyDateTime = dateFormat(row.indexSourceLogs[0].modifyDate) + ' ' + timeFormat(row.indexSourceLogs[0].modifyTime);
            this.modifyUser = row.indexSourceLogs[0].modifyUser;

            let recordDetails = [];
            let details = JSON.parse(row.indexSourceLogs[0].modifyText)[0];

            for (const key in details) {
                // details[key].riskModifyType = this.ModifyEvent[details.riskModifyTypeEnum];

                recordDetails = [...recordDetails, ...details[key]];
            }

            this.recordDetails = recordDetails;

            console.log(this.recordDetails, 'recordDetails');
        } else {
            this.yh_message_warn('未找到更新详情!');
            this.recordDetails = [];
        }
    }

    verify() {
        return true;
    }
}
</script>
<style lang="scss" scoped>
#operating-record {
    height: 100%;
    min-width: 1350px;
    padding: 0 10px;
}
.table-toolbar {
    padding: 10px 0;
}

.record-detail {
    background: #f7f8fc;
    margin: 10px 0;
    padding: 10px;
    height: calc(35% - 31px);

    p {
        margin: 5px;
    }

    span {
        margin: 0 5px;
    }

    b {
        color: var(--primary);
    }
}
// 竖分隔符
.separator-S {
    position: relative;
    display: inline;
    width: 1px;
    height: 100%;
    margin: 0 10px 0 0;
}

.separator-S::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--primary);
    // height: 28px;
}

/deep/ .el-dialog {
    .el-dialog__header {
        background: #f9f9f9;

        .el-dialog__title,
        .el-dialog__headerbtn .el-dialog__close {
            color: #333333;
        }
    }

    .el-dialog__body {
        max-height: 65vh;
        padding: 0 20px;

        .el-form-item__label {
            height: 25px;
            line-height: 30px;
            /* vertical-align: bottom; */
            overflow: visible;
            padding: 0;
            font-size: 12px;
        }
    }

    .el-dialog__footer {
        text-align: right;
        border-top: none;
        .el-button {
            min-width: 50px;
            border-radius: 4px;
        }
        .el-button + .el-button {
            margin-left: 10px;
        }

        .dialog-footer {
            padding: 0 10px;
        }
    }
}

/deep/ .el-divider--horizontal {
    margin: 0 0 20px 0;
}

.yellow {
    background: #fbf5eb;
    border-radius: 3px;
    color: #f39500;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    width: 50px;
    text-align: center;
}
.blue {
    background: #d0e7ff;
    border-radius: 3px;
    color: #137efc;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    width: 50px;
    text-align: center;
}
.red {
    background: #fadbd4;
    border-radius: 3px;
    color: #ee7054;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    width: 50px;
    text-align: center;
}
</style>
